<template>
  <div>
    <h1>颜色</h1>
    <p>
      通过 sass 和 javascript，你可以使用 Material Design 规范中的所有颜色。
      这些值可以在样式表、组件文件和实际组件中通过 颜色类 系统使用。
    </p>

    <h2>类</h2>
    <p>
      规范中的每种颜色都会被转换为 background 和 text
      变体，以便通过一个类在你的应用中设置样式，例如 &lt;div class="red"&gt; 或
      &lt;span class="red--text"&gt;。 这些颜色定义在 这里 。
    </p>

    <div class="purple darken-2 text-center">
      <span class="white--text">Lorem ipsum</span>
    </div>

    <br />
    <br />
    <p>
      文本颜色也支持 darken 和 lighten 变体，使用 text--{lighten|darken}-{n}
      即可。
    </p>
    <div>
      Lorem ipsum dolor sit amet,
      <strong class="red--text text--lighten-1">inciderint</strong> definitionem
      est ea, explicari prodesset eam id. Mazim doctus vix an.
      <span class="indigo--text text--darken-2"
        >Amet causae probatus nec ex</span
      >.
    </div>

    <br />
    <br />
    <h2>Javascript 色彩包</h2>
    <p>
      Vuetify 有一个可选的 javascript 颜色包，你可以在你的应用中导入使用。
      这也可以用来帮助定义你的应用的主题。
    </p>

    <app-code>
      <pre>
// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.red.darken1, // #E53935
        secondary: colors.red.lighten4, // #FFCDD2
        accent: colors.indigo.base, // #3F51B5
      },
    },
  },
})
    </pre
      >
    </app-code>
    <br />
    <h2>Sass 颜色包</h2>
    <p>
      虽然方便，但颜色包会增加大约 30kb 的 CSS 导出大小。
      某些项目可能只需要默认提供的类，这些类是运行项目构建 Vuetify 时得到的。
      要禁用这个功能，你必须 手动 引入并构建 sass 主文件。 这需要一个 Sass
      loader 和一个 .sass/.scss 文件入口。
    </p>
    <app-code>
      <pre>
// src/sass/main.scss

$color-pack: false;

@import '~vuetify/src/styles/main.sass';
      </pre>
    </app-code>
    <p>你需要将创建的 main.sass 文件包含在你的项目中。</p>
    <app-code>
      <pre>
// src/index.js
import './src/sass/main.scss'
// OR
require('./src/sass/main.scss')
        </pre
      >
    </app-code>
    <v-alert dense outlined type="error">
      你必须配置你的 webpack 以使用sass 。
      如果你使用的是预制模板，它已经帮你完成了这一步。
    </v-alert>
    <p>
      这也可以在你的 App.vue 文件中完成。
      请记住，根据你的项目设置，这_将_增加构建时间，因为每次更新你的入口文件时，都需要重新生成
      Sass 文件。
    </p>
    <app-code>
      <pre>
&lt;style lang="sass"&gt;
  $color-pack: false;
  @import '~vuetify/src/styles/main.sass';
&lt;/style&gt;
        </pre
      >
    </app-code>
    <br />

    <br />
    <br />
    <h2>Material 色彩表</h2>
    <p>以下是按原色分组的 Material Design 调色板列表。</p>
    <color-palette />
    <br />
  </div>
</template>
<script>
import AppCode from "../components/Codes.vue";
import ColorPalette from "../components/ColorPalette.vue";
export default {
  components: {
    "app-code": AppCode,
    "color-palette": ColorPalette,
  },
};
</script>